.movie {
  .header {
    display: flex;
    box-sizing: border-box;
    padding: 0 40rpx;
    background: #33363D;
    height: 88rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .location {
      display: flex;
      align-items: center;
      opacity: 0.78;
      font-size: 28rpx;
      color: #DFDFDF;

      image {
        width: 26rpx;
        height: 26rpx;
        margin-left: 9rpx;
      }
    }

    .menu {
      display: flex;
      width: 328rpx;
      height: 50rpx;
      align-items: center;
      border-radius: 12rpx 10rpx 10rpx 12rpx;
      // line-height: 0;
      border: 2rpx solid #F19E65;
      font-size: 28rpx;
      color: #F5F5F5;

      view {
        width: 50%;
        height: 52rpx;
        line-height: 52rpx;
        box-sizing: border-box;
        text-align: center;
        border-radius: 12rpx 0 0 12rpx;
        color: #969393;

        &:last-child {
          border-radius: 0 10rpx 10rpx 0;
        }

        &.active {
          color: #fff;
          background-image: linear-gradient(150deg, #F25B86 0%, #F1AC5E 100%);
        }
      }
    }

    .search {
      image {
        width: 27rpx;
        height: 27rpx;
      }
    }
  }

  .hot-movie {
    width: 100vw;
    box-sizing: border-box;
    padding: 0 40rpx;

    .hot-item {
      margin-top: 48rpx;
      width: 100%;
      height: 292rpx;
      background: #33363D;
      display: flex;

      .imgbox {
        width: 210rpx;
        position: relative;

        image {
          margin-top: -20rpx;
          width: 210rpx;
          height: 312rpx;
        }

        .play {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          width: 76rpx;
          height: 76rpx;
          border-radius: 50%;
          opacity: 0.88;
          background: #33363D;
          .cirl {
            position: absolute;
            top: 50%;
            left: 50%;
            margin: -20rpx 0 0 -6rpx;
            // transform: translate(-7%, -50%);
            border-width: 20rpx;
            border-style: solid;
            border-color: transparent transparent transparent #A4A5A7;
          }
        }
      }


      .info {
        flex: 1;
        position: relative;
        box-sizing: border-box;
        padding: 24rpx 0 0 20rpx;

        .title {
          font-size: 32rpx;
          color: #FFFFFF;
          line-height: 45rpx;
          margin-bottom: 5rpx;
        }

        .rate {
          font-size: 28rpx;
          color: #FFFFFF;
          line-height: 42rpx;

          text {
            color: #E9B649;
          }
        }

        .director,
        .scriptwriter {
          opacity: 0.47;
          font-family: PingFangSC-Regular;
          font-size: 24rpx;
          color: #FFFFFF;
          margin: 12rpx 0 5rpx 0;
        }

        .buy {
          position: absolute;
          right: 28rpx;
          bottom: 110rpx;
          width: 108rpx;
          height: 50rpx;
          text-align: center;
          font-size: 24rpx;
          color: #fff;
          line-height: 50rpx;
          background-image: linear-gradient(150deg, #F25B86 0%, #F1AC5E 100%);
          box-shadow: 0 0 8px 2px rgba(242, 109, 125, 0.18);
          border-radius: 12px;
          border-radius: 12px;
          z-index: 10;
        }
      }
    }
  }
}